<template>
  <div class="find">
    <div class="heard">
      <van-search
        class="serach"
        v-model="value"
        background="#d0584d"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="content" v-if="!value">
      <!-- 搜索历史 -->
      <div class="content-top">
        <van-cell title="搜索历史">
          <i class="iconfont" @click="clear">&#xe89e;</i>
        </van-cell>
      </div>
      <div
        class="content-buttom"
        v-for="(item, index) in searchList"
        :key="index"
      >
        <van-cell icon="search">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template>
            <span class="item" @click="toRes1(item)">{{ item }}</span>
          </template>
          <template #right-icon>
            <van-icon name="search" class="iconfont" @click="cha(index)">
              &#xe633;
            </van-icon>
          </template>
        </van-cell>
      </div>
    </div>
    <div class="content" v-else>
      <div class="content-top">
        <!-- 联想区域 -->
        <van-cell title="联想区域" class=""> </van-cell>
      </div>
      <div
        @click="toRes(item, index)"
        class="content-buttom"
        v-for="(item, index) in lianList"
        :key="index"
      >
        <van-cell icon="search">
          <template>
            <div v-html="item" class="item"></div>
          </template>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { setLocal, getLocal } from '@/utils/local.js'
import { suggestion } from '@/api/find.js'
export default {
  name: 'find',
  data () {
    return {
      value: '', // 搜索框
      searchList: [], // 历史搜索列表
      lianList: [], // 联想搜索列表
      optionsList: []
    }
  },
  watch: {
    async value (newValue) {
      this.lianList = []
      this.value = newValue
      if (this.value) {
        const res = await suggestion({
          q: this.value
        })
        console.log(res, '联想区域')
        this.optionsList = res.data.data.options
        res.data.data.options.forEach(item => {
          const _arr = item.split(this.value)
          // console.log(_arr)
          item = _arr.join(`<span style="color:red">${this.value}</span>`)
          console.log(item)
          this.lianList.push(item)
          console.log(this.lianList)
        })
        // this.lianList = this.optionsList.map((item, index) => {
        //   return item.replace(
        //     this.val,
        //     `<span style="color:red">${this.value}</span>`
        //   )
        // })

        // this.lianList = res.data.data.options
        // window.console.log(res)
      }
    },
    deep: true, // 是否深度监听 如果监听一个对象就需要true
    immediate: false // 一打开页面是否进行监听
  },
  methods: {
    onSearch () {
      // 解决空字符问题
      if (this.value.trim() !== '') {
        if (this.searchList !== null) {
          this.searchList.unshift(this.value)
        }
      }
      // 去重
      this.searchList = [...new Set(this.searchList)]
      // 只取前五个数据
      // this.localList.splice(5)
      this.searchList = this.searchList.slice(0, 5)
      // 刷新数据也存在
      setLocal('searchList', JSON.stringify(this.searchList))
      this.$router.push(`/findResult?q=${this.value}`)
    },
    toRes (item, index) {
      this.value = this.optionsList[index]
      this.onSearch()
    },
    toRes1 (item, index) {
      this.value = item
      this.onSearch()
    },
    onCancel () {},
    clear () {
      if (this.searchList.length !== 0) {
        this.$dialog
          .confirm({
            title: '标题',
            message: '确定要删除吗？'
          })
          .then(() => {
            this.searchList = []
            setLocal('searchList', JSON.stringify(this.searchList))
            // on confirm
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    cha (index) {
      this.searchList.splice(index, 1)
      setLocal('searchList', JSON.stringify(this.searchList))
    }
  },
  created () {
    console.log(this.searchList)
    this.searchList = JSON.parse(getLocal('searchList'))
  }
}
</script>

<style lang="less" scoped>
.van-search__action {
  color: #fff;
  background-color: #d0584d;
}
.red {
  color: red;
}
.item {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
